<p-divider>
  <b>状态配置</b>
</p-divider>
<div class="field grid">
  <label class="col-12 mb-2 md:col-2 md:mb-0">状态地址</label>
  <div class="col-12 md:col-10">
    <input type="text"
      pInputText
      class="w-full p-inputtext-sm"
      placeholder="状态地址"
      [required]="true"
      [(ngModel)]="config.Address" />
  </div>
</div>
<div class="field grid">
  <label htmlFor="Address"
    class="col-12 mb-2 md:col-2 md:mb-0">类型</label>
  <div class="col-12 md:col-10">
    <p-dropdown [options]="types"
      [(ngModel)]="config.Type"
      placeholder="字段类型"></p-dropdown>
  </div>
</div>
<p-table *ngIf="config"
  [value]="config.Maps"
  styleClass="p-datatable-sm field-list"
  [reorderableColumns]="true">
  <ng-template pTemplate="caption">
    <div class="flex align-items-center justify-content-between">
      <i class="pi pi-plus cursor-pointer	"
        title="添加"
        (click)="onAddStatusClick()"></i>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th></th>
      <th>值</th>
      <th>描述</th>
      <th>颜色</th>
      <th>操作</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body"
    let-status
    let-columns="columns"
    let-index="rowIndex">
    <tr [pReorderableRow]="index">
      <td>
        <span class="pi pi-bars"
          pReorderableRowHandle></span>
      </td>
      <td>
        {{status.Key}}
      </td>
      <td>
        {{status.Description}}
      </td>
      <td>
        <i class="pi pi-circle-fill"
          [title]="status.Color"
          [style]="{color:status.Color}"></i>
      </td>
      <td>
        <i class="pi pi-file-edit mr-2 cursor-pointer	"
          title="修改"
          (click)="onEditStatus(status)"></i>
        <i class="pi pi-trash cursor-pointer"
          title="删除"
          (click)="onDeleteStatus(status)"></i>
      </td>
    </tr>
  </ng-template>
</p-table>
<app-status-config-dialog #configDialog
  (editConfirm)="onEditStatusConfirm($event)"></app-status-config-dialog>